// Chats.js
import React, { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';

const Chats = () => {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');
  const messageRef = useRef(null);
  const navigate = useNavigate();

  // 自动回复逻辑
  const autoReply = (userMessage) => {
    if (userMessage.includes('有货')) {
      return '亲，您看的这款商品目前是有货的，您可以放心下单';
    } else if (userMessage.includes('保质期')) {
      return '亲,这款食物的保质期是6个月/天，建议您在保质期内食用以保证最佳口感和品质。';
    } else if (userMessage.includes('你好')) {
      return '亲,您好，欢迎来到我们的店铺！请问您有什么需要帮助的吗？';
    } else if (userMessage.includes('新鲜')) {
      return '亲,我们的商品从源头到您的手中，都经过了严格的品质控制和快速物流，确保您收到的商品是最新鲜的。同时，我们也提供了详细的储存方法和售后保障，让您购物无忧。如果您有任何疑问或需要进一步的帮助，请随时联系我们。';
    } else if (userMessage.includes('味道')) {
      return '亲，这款食物的味道非常独特，口感鲜美/酥脆/软糯等，受到了很多买家的好评。您可以根据自己的口味偏好进行尝试。';
    } else if (userMessage.includes('存储')) {
      return '亲，这款食物建议存放在阴凉干燥处，避免阳光直射和高温。开封后请尽快食用，以保证最佳品质。';
    } else if (userMessage.includes('食品安全')) {
      return '亲，这款食物已经通过了国家食品安全认证和相关机构的检测，确保安全无虞。您可以放心购买和食用。';
    } else {
      return '亲，我暂时无法回答您的问题。您可以尝试联系客服或查看产品详情了解更多信息';
    }
  };

  // 处理用户发送消息
  const handleSend = (e) => {

    if (e.keyCode == 13) {
      if (newMessage.trim()) {
        // 添加用户消息到聊天记录
        setMessages((prevMessages) => [...prevMessages, { user: 'You', text: newMessage }]);

        // 获取自动回复
        const reply = autoReply(newMessage);

        // 添加自动回复到聊天记录
        setTimeout(() => {
          setMessages((prevMessages) => [...prevMessages, { user: 'Bot', text: reply }]);
        }, 1000);
        // 清空输入框
        setNewMessage('')
        // 滚动到底部
        messageRef.current.scrollTop = messageRef.current.scrollHeight;
      }
    }
  };

  const handleSend1 = () => {
    if (newMessage.trim()) {
      // 添加用户消息到聊天记录
      setMessages((prevMessages) => [...prevMessages, { user: 'You', text: newMessage }]);

      // 获取自动回复
      const reply = autoReply(newMessage);

      // 添加自动回复到聊天记录
      setTimeout(() => {
        setMessages((prevMessages) => [...prevMessages, { user: 'Bot', text: reply }]);
      }, 1000);


      // 清空输入框
      setNewMessage('');

      // 滚动到底部
      messageRef.current.scrollTop = messageRef.current.scrollHeight;

    }
  }

  return (
    <div className="chat-log">
      <button onClick={()=> navigate('/groupChat') }>加入群聊</button>
      <div className="messages" ref={messageRef}>
        {messages.map((msg, index) => (
          <div key={index} className={`chat-message ${msg.user === 'You' ? 'you' : 'bot'}`}>
            <span className="user">{msg.user}:</span>
            <span className="text">{msg.text}</span>
          </div>
        ))}
      </div>
      <div className="input-container">
        <input
          type="text"
          value={newMessage}
          onKeyDown={handleSend}
          onChange={(e) => setNewMessage(e.target.value)}
          placeholder="Type a message..."
        />
        <button onClick={handleSend1}>Send</button>
      </div>
    </div>
  );
};

export default Chats;